<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#tutorial {
			border: 1px solid black;
			margin-left: 400;
		}
	</style>
	<body>
		<div id="color"></div>
		<canvas id="canvas" width="600" height="300"></canvas>
		<script type="text/javascript">
			var img = new Image();
			img.src = './img/111.png';
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			img.onload = function() {
			  ctx.drawImage(img, 0, 0);
			  img.style.display = 'none';
			};
			var color = document.getElementById('color');
			function pick(event) {
			  var x = event.layerX;
			  var y = event.layerY;
			  var pixel = ctx.getImageData(x, y, 2, 2);
			  var data = pixel.data;
			  var rgba = 'rgba(' + data[0] + ',' + data[1] +
			             ',' + data[2] + ',' + (data[3] / 255) + ')';
			  color.style.background =  rgba;
			  color.textContent = rgba;
			}
			canvas.addEventListener('mousemove', pick);
		</script>
	</body>
</html>
